<template>
	<div class="modal-container">
		<el-dialog title="发票开具" width="596px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" :closed="on_closed">

			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">角色</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.title" placeholder="角色"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">菜单联动类型</div>
						<div class="input-item">
							<!-- 0-未设置 1-全选/全不选 2-父子联动 -->
							<el-radio-group v-model="form.rolesType">
								<el-radio :label="1">联动</el-radio>
								<el-radio :label="0">不联动</el-radio>
							</el-radio-group>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">菜单权限</div>
						<div class="input-item">
							<div class="cate-cascader">
								<el-cascader v-model="cascader_value" :options="menu_tree_cates" :props="cascader_props" clearable
									@change="on_cascader_change"></el-cascader>
							</div>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">权限字符</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.authStr" placeholder="权限字符"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">排序</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.ordering" placeholder="排序"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">状态</div>
						<div class="input-item">
							<el-radio-group v-model="form.status">
								<el-radio :label="1">启用</el-radio>
								<el-radio :label="0">禁用</el-radio>
							</el-radio-group>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">备注</div>
						<div class="input-item">
							<el-input clearable type="textarea" v-model="form.remark" placeholder="备注"> </el-input>
						</div>
					</div>


				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		name: "modal-hetong",
		components: {

		},

		data() {
			return {
				show: false,
				info: {

				},
				form: {
					"id": "",
					"title": "",
					"status": "",
					"rolesType": "",
					"ordering": "",
					"roles": "",
					"authStr": "",
					"remark": "",
				},


				// 级联
				menu_tree_cates: [],
				menu_flat_cates: [],
				cascader_props: {
					value: 'id',
					label: 'title',
					children: 'child',
					multiple: true,
					checkStrictly: true
				},

				cascader_value: '',
				// 级联
			};
		},
		computed: {},
		watch: {

		},
		created() {
			this.query_menu_cate()
		},

		methods: {
			init(row) {
				this.show = true;

				if (row) {
					this.query_detail(row)
					// this.form = {
					// 	"id": row.id || "",
					// 	"title": row.title || "",
					// 	"status": row.status || "",
					// 	"rolesType": row.rolesType || "",
					// 	"ordering": row.ordering || "",
					// 	"roles": row.roles || "",
					// 	"authStr": row.authStr || "",
					// 	"remark": row.remark || "",
					// };
				}
			},
			query_detail(row) {
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "auth_getRoleInfo",
						id: row.id
					}
				}).then(res => {
					if (res.code == 200) {
						this.form = {
							"id": row.id || "",
							"title": row.title || "",
							"status": row.status || "",
							"rolesType": row.rolesType || "",
							"ordering": row.ordering || "",
							"roles": row.roles || "",
							"authStr": row.authStr || "",
							"remark": row.remark || "",
						};

						if (row.roles) {
							let finally_id_list = row.roles.split(',')
							let id_values = []
							finally_id_list.forEach(id => {
								let cate = this.menu_flat_cates.find(v => v.id == id)
								id_values.push(cate.id_path)
							})
							
							this.cascader_value = id_values;//级联选择器 回显
						}
					}
				})
			},
			on_before_close() {
				this.show = false;
			},
			on_closed() {

			},

			do_submit() {
				if (!this.form.title) {
					alertErr("请填写角色名称");
					return;
				}

				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "auth_saveRole",
						...this.form
					}
				}).then(res => {
					alert(res)
					if (res.code == 200) {
						this.$emit('confirm')
						this.show = false
					}
				})
			},

			uploadChange(url) {
				this.form.invoiceUrl = url;
			},


			//级联选择
			//级联选择
			initValue(value) {
				this.cascader_value = value
			},

			query_menu_cate() {
				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "auth_getMenuList",
						page: 1,
						pageNum: 1000
					}
				}).then((res) => {
					if (res.code == 200) {
						this.menu_tree_cates = res.data.list;
						this.menu_flat_cates = this.getFlatFromTree(this.menu_tree_cates)
						this.$log('所有菜单数据', this.menu_flat_cates)
					}
				})
			},

			getFlatFromTree(treeList, flat_list = [], parent_id_path = []) {
				treeList.forEach(v => {
					v.id_path = [...parent_id_path, v.id]
					flat_list.push(v);
					if (v.child && v.child.length) {
						// flat_list.push(...v.child)
						this.getFlatFromTree(v.child, flat_list, v.id_path)
					}
				})

				return flat_list
			},


			on_cascader_change(value) {
				let cate_list = []
				let cate_title_list = []
				value.forEach(id_arr => {
					let id = id_arr[id_arr.length - 1]
					let cate = this.menu_flat_cates.find(v => v.id == id)
					cate_list.push(cate)
					cate_title_list.push(cate.title)
				})

				let info = {
					value: value,
					cate_list: cate_list,
					cate_title_list: cate_title_list,
				}
				this.$log('级联选择器 value', value)
				this.$log('级联选择器 info', info)
				this.$emit('confirm', info)


				this.form.roles = cate_list.map(v => v.id).join(',')
			}
			//级联选择
		},
	};
</script>

<style scoped lang="less">
	.cate-cascader {
		width: 100%;
	}

	.el-cascader {
		width: 100%;
	}




	.upload-plus {
		width: 140px;
	}

	/deep/ .el-upload {
		display: block;
		width: 200px;
		margin: 0 auto;
		margin: 0;

		.empty {
			.flex-center();
		}
	}

	/deep/ .modal-record {
		// margin-top: 80px !important;


		.modal-inner {
			padding: 0;
		}

		.el-dialog__header {
			.flex-between();
			border-bottom: 1px solid #eee;
			background: #a98c4d;
			background: #f7f7f7;
			height: 60px;
			line-height: 60px;
			padding: 0 20px;
			font-size: 18px;
			color: #333;

			.el-dialog__title {
				color: #000;
			}

			.el-dialog__headerbtn {

				// top: 0;
				.el-dialog__close {
					color: #000;
					font-size: 20px;
					font-weight: bold;
				}
			}
		}

		.el-dialog__body {
			padding: 0;
		}

		.el-dialog__footer {
			text-align: center;



		}
	}

	.modal-ctx {
		padding: 30px 50px;
		max-height: 60vh;
		overflow-y: auto;
		border-bottom: 1px solid #ddd;

		.tip {
			margin-bottom: 20px;
			color: #444;
			font-size: 14px;
		}

		.input-box {
			margin-bottom: 15px;
			position: relative;

			&.flex {
				display: flex;
				align-items: flex-start;
				// align-items: center;

				.label {
					margin-bottom: 0;
				}
			}

			.label {
				min-width: 80px;
				// margin-right: 20px;
				margin-bottom: 20px;
				font-size: 14px;
				color: #6e7285;
			}

			.input-item {
				flex: 1;
				display: flex;
				align-items: center;


				.el-input {
					width: 220px;
					width: 100%;
				}

				.el-select {
					width: 100%;
				}
			}
		}
	}

	.upload-ctx {
		margin: 20px 0;
	}

	.btn-send {}
</style>